<template>
  <!-- 工作经验 -->
  <Top-Page>
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #backText></template>
      <template #content>工作经验</template>
    </cu-custom>

    <view class="item">
      <view class="title">公司名称</view>
      <view class="item-value">
        <input class="value" type="text" v-model="name" placeholder="填写公司名称" />
        <view class="arrow-right"></view>
      </view>
    </view>

    <view class="item" @click="toPicker('type')">
      <view class="title">职位</view>
      <view class="item-value">
        <input class="value" type="text" disabled v-model="job_type" placeholder="填写职位" />
        <view class="arrow-right"></view>
      </view>
    </view>

    <view class="item">
      <view class="title">在职时间</view>
      <view class="item-value">
        <view class="value">
          <picker
            class="value-picker"
            mode="date"
            :value="end"
            :start="startDate"
            :end="endDate"
            @change="bindDateChange"
          >
            <view @click="changeDate('start')" :class="{ 'placeholder-value': !start }">{{ start || "开始时间" }}</view>
          </picker>
          <view class="value-decollator">-</view>
          <picker
            class="value-picker"
            mode="date"
            :value="end"
            :start="startDate"
            :end="endDate"
            @change="bindDateChange"
          >
            <view @click="changeDate('end')" :class="{ 'placeholder-value': !end }">{{ end || "截止时间" }}</view>
          </picker>
        </view>

        <view class="arrow-right"></view>
      </view>
    </view>

    <view class="item">
      <view class="title">工作内容</view>
      <view class="item-value">
        <textarea class="value" maxlength="200" auto-height v-model="content" placeholder="填写职位" />
        <view class="arrow-right"></view>
      </view>
    </view>

    <view class="btns-wrap">
      <view class="btn del" v-if="id" @click="del">删除</view>
      <view class="btn save" @click="save">保存</view>
    </view>
  </Top-Page>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import recruitApi from "@/api/recruit.js"; //招聘相关API

const name = ref("");
const job_type = ref("");
let job_value = [];
const start = ref("");
const end = ref("");
const content = ref("");
let id = ref(0);

let pickerType = "";
const pickerDateShow = ref(false);

const startDate = getDate("start");
const endDate = getDate("end");

onShow(() => {
  const app = getApp();
  const modifyData = app.globalData.modifyData;

  if (modifyData) {
    job_type.value = modifyData.value.label.join("/");

    job_value = modifyData.value.value;
  }
});

function getDate(type) {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  if (type === "start") {
    year = year - 60;
  } else if (type === "end") {
    year = year + 2;
  }
  month = month > 9 ? month : "0" + month;
  day = day > 9 ? day : "0" + day;
  return `${year}-${month}-${day}`;
}

const changeDate = (type: string) => {
  pickerType = type;
  pickerDateShow.value = true;
};

const bindDateChange = (e: any) => {
  const date = e.detail.value;

  if (pickerType === "start") {
    start.value = date;
  } else {
    end.value = date;
  }
};

onLoad((params: any) => {
  id.value = Number(params.id);

  const a = uni.getStorageSync("amend-toJobexp");

  name.value = a.company;
  job_type.value = a.type;
  job_value = [a.type_id];
  start.value = a.start_date;
  end.value = a.end_date;
  content.value = a.content;
});

const del = () => {
  recruitApi
    .jobexpdel({
      id: id.value
    })
    .then((res: any) => {
      if (res.code == 0) {
        uni.navigateBack();
      }
    });
};

const save = () => {
  const message = !name.value
    ? "请填写公司名称"
    : !job_type.value
    ? "请选择职位"
    : !start.value || !end.value
    ? "请填写在职时间"
    : !content.value
    ? "请填写工作内容"
    : "";

  if (message) {
    uni.showToast({
      title: message,
      icon: "none"
    });
    return;
  }

  recruitApi
    .jobexp({
      id: id.value,
      name: name.value,
      job_type: job_value[job_value.length - 1],
      start: start.value,
      end: end.value,
      content: content.value
    })
    .then((res: any) => {
      if (res.code == 0) {
        uni.navigateBack();
      }
    });
};

const toPicker = (type: string) => {
  uni.navigateTo({
    url: `/pages/recruit/intention/picker?type=${type}`
  });
};
</script>

<style lang="scss" scoped>
.top-page {
  position: relative;
  background-color: #fff;
  min-height: 100vh;
  padding-bottom: 100rpx;

  :deep(.cu-bar) {
    background-color: transparent;

    .nav-content__item {
      padding: 0 12rpx;
    }

    .nav-content__item-1 {
      color: #636363;
    }

    .more {
      width: 50rpx;
      margin-right: 20rpx;
      filter: invert(70%);
    }
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30rpx;
    font-size: 32rpx;
    border-bottom: 1rpx solid #f4f4f4;

    .title {
      color: #262626;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: bold;
    }

    .item-value {
      margin-top: 20rpx;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;

      .value {
        flex: 1;
        display: flex;
        align-items: center;

        .value-decollator {
          margin-right: 20rpx;
        }

        .value-picker {
          flex: 1;
        }

        .placeholder-value {
          color: grey;
        }

        input {
          width: 8em;
          // text-align: center;
        }
      }
    }
  }

  .btns-wrap {
    position: fixed;
    bottom: 50rpx;
    width: 80%;
    left: 10%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    .btn {
      flex: 1;
      flex-shrink: 0;
      height: 88rpx;
      line-height: 86rpx;
      letter-spacing: 1rpx;
      text-align: center;
      border-radius: 16rpx;
      font-family: "PingFang SC";
      font-size: 36rpx;
      font-style: normal;
      font-weight: 400;

      &:nth-child(2) {
        margin-left: 40rpx;
      }
    }

    .del {
      border: 1rpx solid #ff3b27;
      border-radius: 16rpx;
      color: #ff3b27;
    }

    .save {
      background: #ff3b27;
      color: #fff;
    }
  }
}
</style>
